<template>
  <div class="tw-moblie-down-list">
    <div class="tw-parent-btn-name" @click="clickFilter"
      :style="{color: fontColor, borderColor: fontColor}">
      {{parentBtnName || defaultParentBtnName}}
      <span ref="filterBtn" class="tw-parent-btn-name-after"
        :style="{borderColor: borderColor}"></span>
    </div>
    <van-popup v-model="showPicker" round position="bottom" v-if="showPicker">
      <van-picker
        :confirm-button-text="confirmButtonText"
        :cancel-button-text="cancelButtonText"
        :visible-item-count="visibleCount"
        :title="textTitle"
        :item-height="itemHeight"
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="confirmFrom"
        @change="handleChange"
      />
    </van-popup>
  </div>
</template>

<script>
import props from './props'
import Vue from 'vue'
import { Picker } from 'vant'
import 'vant/lib/index.css'

Vue.use(Picker)
export default {
  name: 'moblie-down-list',
  props,
  data() {
    return {
      showPicker: false,
      parentBtnName: ''
    }
  },

  watch: {
    showPicker: {
      handler (newValue) {
        newValue ? this.$refs.filterBtn.classList.add('tw-lib-filter-down') : this.$refs.filterBtn.classList.remove('tw-lib-filter-down')
      }
    }

  },

  computed: {
    visibleCount () {
      return isNaN(+this.visibleItemCount) ? 6 : +this.visibleItemCount
    },

    defaultParentBtnName () {
      return `${this.columns[0].text}${this.columns[0].children && this.columns[0].children.length > 0 ? ',' + this.columns[0].children[0].text : ''}`
    }
  },

  methods: {
    handleChange (picker, value, index) {
      this.$emit('change', { picker, value, index })
    },

    confirmFrom (selNameList, selIndexList) {
      this.$emit('confirmfrom', selNameList, selIndexList)
      this.showPicker = false
      this.parentBtnName = Array.isArray(selNameList) ? selNameList.join(',') : selNameList.text
    },

    clickFilter () {
      this.$emit('click')
      this.showPicker = true
    }
  },

  mounted () {
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';

</style>
